完全版：自己完結型HTML実装ガイドとリファレンス

1. 必須となる諸定義と前提知識

自己完結型HTMLを記述する上で、曖昧にされがちな用語と仕様を厳密に定義します。

自己完結型HTML（Self-contained HTML）とは

外部のリソース（<link rel="stylesheet" href="..."> や <script src="...">、外部画像へのURL）を一切使用せず、ネットワーク接続がないオフライン環境でも、レイアウト、スタイル、インタラクション、メディアのすべてが意図通りにレンダリングされるHTMLドキュメントのこと。

1.1 必須のメタデータ定義

HTMLの<head>内には、文字化けやレイアウト崩れを防ぐための完全なメタデータが必要です。

<!-- 常にHTML5の宣言を使用 -->
<!DOCTYPE html>
<!-- 言語指定はスクリーンリーダーの読み上げに必須 -->
<html lang="ja">
<head>
    <!-- 文字エンコーディングは文書の先頭1024バイト以内に配置 -->
    <meta charset="UTF-8">
    <!-- モバイル対応（レスポンシブ）のためのビューポート設定 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- SEOとアクセシビリティのためのタイトル（具体的に） -->
    <title>具体的なページタイトル</title>
</head>
                

2. セマンティックHTMLとアクセシビリティの完全実装

視覚的な表現だけでなく、文書の「意味」を機械（検索エンジンや支援技術）に正しく伝えるためのマークアップです。

2.1 主要なセマンティックタグの使い分け（具体例）

タグ	厳密な定義と役割	よくある省略・誤用と正しい例
`<article>`	それ単体で独立して完結するコンテンツ（ブログ記事、ニュース記事など）。	誤: 単なるレイアウト枠として使う。正: 内部に見出し(h1-h6)を持ち、RSSで配信可能な単位にする。
`<section>`	テーマ性のあるコンテンツのまとまり。必ず見出しを伴うべき。	誤: スタイリングのためのdivの代わりに使う。正: `<section><h2>章タイトル</h2>...</section>`
`<aside>`	メインコンテンツと関連性が薄い、または補足的な情報（サイドバー、広告など）。	本文の理解に不可欠な情報を入れないこと。

2.2 アクセシビリティ（WAI-ARIA）の具体例

視覚障害者などの支援技術に対する配慮（WAI-ARIA）の具体的な実装例です。属性を省略してはいけません。

アイコン付きボタンの実装例（ARIA対応）

視覚的には「×」アイコンだけのボタンでも、スクリーンリーダーには「閉じる」と伝わるようにします。

<!-- aria-labelで意味を伝え、aria-hidden="true"で装飾アイコンを読み上げから除外 -->
<button aria-label="メニューを閉じる">
    <span aria-hidden="true">&times;</span>
</button>
                    

3. 自己完結性のための技術（Base64, インライン展開）

3.1 画像のBase64エンコード埋め込み

外部の画像ファイル（.png, .jpgなど）をHTMLファイル内に直接埋め込む手法です。データURIスキームを使用します。

Data URI スキームの構文

data:[<mediatype>][;base64],<data>

実例：小さな赤い点の画像（Base64）

上記の画像は外部通信を行わず、以下のコードで表示されています。

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==" alt="デモ用の赤い点">
                    

3.2 SVGのインライン記述

ベクター画像はBase64に変換するよりも、SVGコードを直接HTMLに記述する方が、CSSで色を変更できるなどの利点があります。

実例：インラインSVGによるチェックマーク

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="var(--accent-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <polyline points="20 6 9 17 4 12"></polyline>
</svg>
                    

4. インタラクティブな実例（JavaScript）

自己完結型ファイル内で、DOM操作を行うJavaScriptの完全な実例です。タブ切り替えUIを実装します。

タブUIのデモンストレーション

ここは「概要」のパネルです。JavaScriptによってクラスが切り替わり、表示制御が行われています。

ここは「詳細仕様」のパネルです。アクセシビリティを考慮し、role="tabpanel"やaria-labelledbyが適切に設定されています。

ここは「注意事項」のパネルです。インラインスクリプトによって制御されています。